<template>
  <div class="weather">
    <div class="wt" v-show="support">
      <div class="wtimg"><img :src="wtInfo.icoImg"></div>
      <div class="wtname">{{wtInfo.weather}}</div>
    </div>
    <div class="ot" v-show="support">
      <div class="tp"><label>温度</label><span>{{wtInfo.degree}}°C</span></div>
      <div class="api"><label>空气质量</label><span>{{rank.aqi_name}}</span></div>
    </div>
    <div class="none-txt" v-show="!support">查询天气失败</div>
  </div>

</template>

<script>
import TimeUpdate from '@/modules/corejs/time/time-update'
import getWeatherInfo from './base/index'
import getWtImg from './base/get-wt-img'

let timeUpdate = new TimeUpdate()

export default {
  props: ['cityName'],
  data () {
    return {
      // cityName: '深圳',
      wtInfo: {},
      rank: {},
      support: true
    }
  },
  created () {
    timeUpdate.start(this.update, 1000 * 60 * 60 * 2)
  },
  destroyed () {
    timeUpdate.stop()
  },
  watch: {
    cityName () {
      this.update()
    }
  },
  methods: {
    update () {
      let { cityName } = this
      if (cityName) {
        getWeatherInfo(cityName, d => {
          let { air, observe } = d
          if (!observe.weather) {
            this.wtInfo = observe
            this.support = false
            return
          }
          this.support = true
          observe.icoImg = getWtImg(observe).icoImg

          this.wtInfo = observe
          this.rank = air
        })
      }
    }
  }
}
</script>

<style scoped>

  .weather {
    /* color: #666; */
    height: 1.08em;
    /* text-shadow: 0px 1px 3px #7b7b7b; */
    .wweek {
      padding-left: .10em;
    }
    .wt {
      float: left;
      margin-top: -0.04em;
    }
    .wtimg {

      width: 0.6em;
      height: 0.6em;
      img {
        width: 100%;
        display: block;
      }
    }
    .wtname {
      font-size: .2em;
      /* color: #fbf164; */
      text-align: center;
      margin-top: -0.06em;
    }
    .ot {
      overflow: hidden;
      padding-left: 0.10em;
      /* span {
        color: #fbf164;
      } */
      label {
        padding-right: 0.10em;
      }
    }
    .tp {
      padding: 0.16em 0 0.06em;
      font-size: .2em;
    }
    .api,.none-txt {
      font-size: .2em;
    }
  }
</style>
